<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<link rel="shortcut icon" type="image/x-icon" href="https://www.starbucks.com.cn/_themes/starbucks/img/favicon.ico?v=20161028">
	<title>星巴克咖啡文化</title>
	<link rel="stylesheet" type="text/css" href="./css/public.css">
	<link rel="stylesheet" type="text/css" href="./css/icon-font/iconfont.css">
	<link rel="stylesheet" type="text/css" href="./css/coffecur.css">
</head>
<body>
	<!--头部-->
	<div id="head" class="posit header">
		<div class="header-left">
			<div class="menu">
				<i class="iconfont icon-caidan"></i>
				<p class="menu-list">菜单</p>
			</div>
		</div>
		<div class="header-mid">
			<a href="index.html">
			<a href="index.html"><img src="https://www.starbucks.com.cn/_themes/starbucks/img/logo.svg"></a>
			</a>
		</div>
		<div class="header-right">
			<div class="box1">
				<p>心享俱乐部</p>
				<p><a href="loading.html">登录</a>或<a href="add.html">注册</a></p>
			</div>
		</div>
	</div>
	<!--头部结束-->
	<!--中部开始-->
	<div class="bodyer">
		<div class="scree">
			<div class="photo">
				<p>了解更多关于咖啡的一切</p>
				<h2>咖啡文化</h2>	
			</div>
		</div>
		<div class="container">
			<div class="content">
				<p class="title">咖啡文化</p>
			</div>
			<div class="group">
				<div class="carme">
					<img src="https://www.starbucks.com.cn/assets/img/resized/bw-thumb-s-w154-h154-q100-m111111.jpg">
				</div>
				<div class="trans">
					<h2>咖啡历史</h2>
					<a href="">咖啡的历史与咖啡的酿制方式，有着同样丰富的内容。它可以追溯到一千多年以前。</a>
				</div>	
			</div>
			
			<div class="group">
				<div class="carme">
					<img src="https://www.starbucks.com.cn/assets/img/resized/starbucks-higher-arabica-standards-s-w154-h154-q100-m111111.jpg">
				</div>
				<div class="trans">
					<h2>星巴克更高的阿拉比卡标准</h2>
					<a href="">卓越咖啡，源于品质咖啡豆.</a>
				</div>	
			</div>
			
			<div class="group">
				<div class="carme">
					<img src="https://www.starbucks.com.cn/assets/img/resized/coffee-tree-s-w154-h154-q100-m111111.jpg">
				</div>
				<div class="trans">
					<h2>咖啡种植</h2>
					<a href="">咖啡在世界广泛的种植，但只在南北回归线之间的带状地区。</a>
				</div>	
			</div>
			
			<div class="group">
				<div class="carme">
					<img src="https://www.starbucks.com.cn/assets/img/resized/roasting-s-w154-h154-q100-m111111.jpg">
				</div>
				<div class="trans">
					<h2>咖啡烘焙</h2>
					<a href="">颜色可以被模仿，但它特别的风味却不能。</a>
				</div>	
			</div>
				
			<div class="group">
				<div class="carme">
					<img src="https://www.starbucks.com.cn/assets/img/resized/tasting-s-w154-h154-q100-m111111.jpg">
				</div>
				<div class="trans">
					<h2>咖啡品尝</h2>
					<a href="">基本上，品尝咖啡就是对多种咖啡进行对照，比较和品味。当您只品尝一种咖啡，您就无法做出对照和比较</a>
				</div>	
			</div>			
		</div>
	</div>
	<!--中部结束-->
	<!--底部-->
	<div class="footer clear">
		<div class="row clear">
			<div class="item">
				<a class="foot-title" href="">最新资讯</a>
				<div class="item-list">
					<a href="newgoods.html">当季新品</a>
					<a href="coffee-ice.html">咖啡融合冰淇淋</a>
					<a href="">冷萃冰咖啡</a>
					<a href="">气致™冷萃咖啡</a>
					<a href="">早安新一天</a>
				</div>
			</div>
			<div class="item">
				<a class="foot-title" href="">菜单</a>
				<div class="item-list">
					<a href="">饮品</a>
					<a href="">星巴克美食</a>
					<a href="">星巴克咖啡</a>
					<a href="">星巴克VIA免煮咖啡</a>
					<a href="">茶瓦纳™</a>
				</div>
			</div>
			<div class="item">
				<a class="foot-title" href="">星享卡</a>
				<div class="item-list">
					<a href="loading.html">登录账户</a>
					<a href="">注册星享卡</a>
					<a href="">忘记密码</a>
					<a href="">报失星享卡</a>
					<a href="">购买星享卡</a>
				</div>
			</div>
			<div class="item">
				<a class="foot-title" href="">星巴克礼品卡</a>
				<div class="item-list">
					<a href="">管理星礼卡</a>
					<a href="">申请发票</a>
					<a href="">购买星礼卡</a>
				</div>
			</div>
		</div>
		<div class="row clear">
			<div class="item">
				<a class="foot-title" href="">关于星巴克</a>
				<div class="item-list">
					<a href="">企业新闻</a>
					<a href="">我们的使命和价值观</a>
					<a href="">星巴克责任</a>
					<a href="">工作在星巴克中国</a>
					<a href="">加入星巴克</a>
					<a href="">星巴克在中国</a>
					<a href="">历史回顾</a>
				</div>
			</div>
			<div class="item">
				<a class="foot-title" href="">快捷链接</a>
				<div class="item-list">
					<a href="tianmao.html">天猫旗舰店</a>
					<a href="shoplist.html">星巴克门店</a>
					<a href="">联系星巴克</a>
				</div>
			</div>
			<div class="item">
				<a class="foot-title" href="">常见问题</a>
				<div class="item-list">
					<a href="">星享卡</a>
					<a href="">星礼卡</a>
					<a href="">移动应用</a>
					<a href="">电子发票</a>
					<a href="">星巴克中国</a>
				</div>
			</div>
			<div class="item">
				<div class="item-list">
					<img src="https://www.starbucks.com.cn/_themes/starbucks/img/home/app_qr_20170209.png">
				</div>
				<p>
					<span class="iconfont icon-iconfontpingguo"></span>
					<span class="iconfont icon-anzhuo"></span>
					<p class="tisi">扫码下载app</p>
				</p>
				
			</div>
		</div>
		<div class="lower">
			<div class="alink">
				<P>© 2017 Starbucks Corporation</P>
				<a href="">All rights reserved. 沪ICP备17003747号</a>
				<a href=""><span class="bgimg"></span> 沪公网安备 31010402000318号</a>
			</div>
			<div class="share">
				<i class="iconfont icon-weixin"></i>
				<i class="iconfont icon-weibo"></i>
			</div>
		</div>
	</div>
	<!--底部结束-->
	<!--覆盖层及菜单-->
	<div class="cover" id="fugai">
		<div class="cover-left" id="1">
			<div class="menu-nav">
				<a href="../starbucks-web/coffecur.html">移动端</a>
				<a href="shoplist.html">星巴克门店</a>
				<a href="tianmao.html">天猫旗舰店</a>
			</div>
			<a href="">首页</a>
			<div class="recent">
				<a class="ul" href="">新品推荐<span>▼</span></a>
				<input type="checkbox" name="">
				<div class="recent-list">
					<a class="list-show" href="newgoods.html">当季新品</a>
					<a class="list-show" href="coffee-ice.html">咖啡融合冰淇淋</a>
					<a class="list-show" href="">冷萃冰咖啡</a>
					<a class="list-show" href="">气致™冷萃咖啡</a>
					<a class="list-show" href="">早安新一天</a>
				</div>
			</div>
			<a href="club.html">星享俱乐部</a>
			<div class="recent">
				<a class="ul" href="">星巴克移动应用<span>▼</span></a>
				<input type="checkbox" name="">
				<div class="recent-list">
					<a class="list-show" href="">星巴克移动应用</a>
					<a class="list-show" href="">星巴克Apple Watch</a>
				</div>
			</div>
			<a href="">星礼卡</a>
			<div class="recent">
				<a class="ul" href="">咖啡文化<span>▼</span></a>
				<input type="checkbox" name="">
				<div class="recent-list">
					<a class="list-show" href="coffecur.html">咖啡文化</a>
					<a class="list-show" href="">星巴克臻选™咖啡</a>
					<a class="list-show" href="">如何冲泡咖啡</a>
				</div>
			</div>
			<div class="recent">
				<a class="ul" href="">饮品美食<span>▼</span></a>
				<input type="checkbox" name="">
				<div class="recent-list">
					<a class="list-show" href="">饮品</a>
					<a class="list-show" href="">星巴克美食</a>
					<a class="list-show" href="">星巴克咖啡</a>
					<a class="list-show" href="">星巴克VIA®免煮咖啡</a>
					<a class="list-show" href="">茶瓦纳™</a>
				</div>
			</div>
			<a href="">关于我们</a>
			<a href="">帮助中心</a>
		</div>
		<div class="cover-right" id="2"></div>
	</div>
	<!--结束-->
	<!--头部js部分-->
	<script type="text/javascript">
		var a = document.body.scrollTop;
		console.dir(document.body);
		document.body.onwheel = function f(){
			console.log('ss');
			if(document.body.scrollTop > a){
				a = document.body.scrollTop;
				document.getElementById('head').classList.remove('posit');
								
			}else{
				a = document.body.scrollTop;
				document.getElementById('head').classList.add('posit');				
			}
			cover.classList.remove('show');
			left.classList.remove('show');
		}
	</script>
	<!--覆盖层js-->
	<script type="text/javascript">
		var cover = document.getElementById('fugai');
		var caidan = document.getElementsByClassName('menu')[0];
		var left = document.getElementById('1');
		var right = document.getElementById('2');
		var a = document.body.scrollTop;
		console.dir(caidan);
		caidan.onclick = function chuxian(){
			console.log('caidan');
			console.dir(cover);
			cover.classList.add('show');
			left.classList.add('show');

		}
		right.onclick = function tuichu(){
			console.log('bod');
			cover.classList.remove('show');
			left.classList.remove('show');;
		}
	</script>
</body>
</html>